<template>
  <n-form-itemGi v-bind="filteredProps">
    <slot></slot>
  </n-form-itemGi>
</template>

<script lang="ts" setup>
  import { computed } from 'vue';
  import { NFormItemGi } from 'naive-ui';
  import type { FormItemGiProps } from 'naive-ui';

  // 定义组件属性，继承自 NFormItemGi
  const props = withDefaults(
    defineProps<{
      // 基础表单项属性
      label?: string;
      path?: string;
      rule?: FormItemGiProps['rule'];
      rules?: FormItemGiProps['rules'];
      required?: boolean;
      showRequireMark?: boolean;
      showFeedback?: boolean;
      labelAlign?: FormItemGiProps['labelAlign'];
      labelPlacement?: FormItemGiProps['labelPlacement'];
      labelWidth?: FormItemGiProps['labelWidth'];
      labelStyle?: FormItemGiProps['labelStyle'];
      labelProps?: FormItemGiProps['labelProps'];
      showLabel?: boolean;
      validationStatus?: FormItemGiProps['validationStatus'];
      feedback?: string;
      feedbackStyle?: FormItemGiProps['feedbackStyle'];
      size?: FormItemGiProps['size'];

      // 栅格属性
      span?: number;
      offset?: number;
      suffix?: boolean;

      // 其他自定义属性
      [key: string]: any;
    }>(),
    {
      showLabel: true,
      showFeedback: true,
    }
  );

  // 过滤掉可能不被 NFormItemGi 识别的属性
  const filteredProps = computed(() => {
    const { ...rest } = props;
    return rest;
  });
</script>

<style scoped>
  /* 可以根据需要添加样式 */
</style>
